app = @bhv

app.directive('userAge', ->
  restrict: 'A'
  replace: false
  controller: ($scope)->
    getItemStyle = ->
      normal:
        lineStyle: color: '#FECD24'
        areaStyle: color: (->
            zrender.tool.color.getLinearGradient(0, 200, 0, 400, [[0, '#FECD24'],[0.8, 'rgba(255,255,255,0.1)']] )
          )()

    getSeries= ->
      name:'年龄分布',
      type:'line',
      symbol: 'emptyCircle',
      symbolSize: 4
      itemStyle: getItemStyle()
      data: [10, 40, 20, 25, 15, 10, 5]
      smooth: true

    #仅提供 空的数据 ，用做X轴label显示
    getEmptySeries = ->
      name: '年龄分布'
      type: 'bar'
      data: [0, 0, 0, 0, 0]

    getEmptyXAxis = ->
      show: true
      type : 'category'
      position: 'bottom'
      boundaryGap : true
      axisLine: show: false
      axisLabel:
        show: true
        show: true,
        textStyle:
          color: "#FFF"
          fontSize: 16
      data: ['10~19', '20~29', '30~39', '40~49', '50~59']
    #canvas 四周间距
    xLeft = 15
    xRight = 24
    yTop = 0
    yBottom = 24
    @options =
      grid: x: xLeft, y: yTop, x2: xRight, y2: yBottom
      tooltip :   trigger: 'axis'
      legend:  data:['年龄分布'], show: false
      toolbox: show : false
      calculable : true,
      xAxis : [{
        show: true
        type : 'category'
        position: 'top'
        boundaryGap : false
        axisLine: show: false
        splitArea:
          show: true
          areaStyle: color: ['rgb(28, 166, 136)', 'rgb(36, 242, 198)']
        axisLabel: show: false
        data: ['10', '19', '29', '39', '49', '59']
      }, getEmptyXAxis()]
      yAxis: [
        {
          type : 'value'
          show: false
          min: 0
          max: 100
        }
      ]
      series: [getSeries(), getEmptySeries()]
      color: ['#FECD24']
      animation: false
    #计算图标的Y 高度
    @getY = (height)->
      height - yBottom - 5 - 16
    #计算4个图标的x轴位置
    @getXList = (width)->
      w = (width - xLeft - xRight) / 5
      queue = []
      for i in [1..5]
        queue.push(xLeft + i*w - w/2)
      queue


  scope: {}
  link: ($scope, element, attrs, ctrl)->
    $element = $(element)

    chart = echarts.init($element[0])

    chart.setOption(ctrl.options)

    #设置图上图标
    setMarkPointList = ->
      imageMap = [
        'image://image/people-child.png'
        'image://image/people-juvenile.png'
        'image://image/people-youth.png'
        'image://image/people-man.png'
        'image://image/people-elderly.png'
      ]
      y = ctrl.getY($(element).height())
      xList = ctrl.getXList($(element).width())

      for i in [0..4]
        chart.addMarkPoint(0, {
          symbol: imageMap[i]
          symbolSize: 16
          data: [{name: 'item', x: xList[i], y: y}]
        })

    setMarkPointList()
#      chart.addMarkPoint(0, {
#        symbol: 'start'
#        symbolSize: 16
#        data: [{name: '10', x: 100, y: 100}]
#      })
)